<template>
    <div>

      <div class="demo-nav">
        <div class="demo-nav__title">支付密码</div>
        <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
          <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
        </svg>
      </div>

      <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
        密码只能是 6 位数字
      </van-notice-bar>

      <van-form >
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '不能为空', trigger: 'blur' },
                   {min: 6, message: '至少6位', trigger: 'blur'},
                   {type: 'number', message: '请输入数字', trigger: 'blur'}]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" @click="submit">提交</van-button>
        </div>
      </van-form>


      <van-button @click="xianshi" type="primary">查看密码</van-button>
      <div :style="uuu">
        ***{{password}}
      </div>

      <!--<div v-for="item in listindex" :style="uuu">-->
        <!--***{{item.passwordcode}}***-->
        <!--<van-form >-->
          <!--<van-field-->
            <!--v-model="item.passwordcode"-->
            <!--type="password"-->
            <!--name="密码"-->
            <!--label="密码"-->
            <!--placeholder="密码"-->
          <!--/>-->
        <!--</van-form>-->
      <!--</div>-->

      <!-- 密码输入框 -->
      <!--<van-password-input-->
        <!--:value="value"-->
        <!--:focused="showKeyboard"-->
        <!--@focus="showKeyboard = true"-->
      <!--/>-->
      <!--&lt;!&ndash; 数字键盘 &ndash;&gt;-->
      <!--<van-number-keyboard-->
        <!--v-model="value"-->
        <!--:show="showKeyboard"-->
        <!--@blur="showKeyboard = false"-->
      <!--/>-->
    </div>
</template>

<script>
   import { passwordedit,findAllList } from "@/api/customer/passwordcode";
   import { Toast } from 'vant';
  export default {
        name: "ShezhiMima",
      data() {
        return {
          uuu:'display:none',
          value: '',
          password:"",
          listindex:[],
          showKeyboard: true,
          form:{
            passwordnum:'',
            numcustomerId:'',
          }
        };
      },
    created(){
      // this.form.numcustomerId = this.$route.query && this.$route.query.customerId;
      // console.log("*****customerId****"+this.form.numcustomerId)
    this.getList();
    },
      methods:{

        xianshi(){
          Toast('密码:'+this.password);
          // Toast('密码:'+this.listindex[0].passwordcode);
        },

          getList(){
            findAllList().then(res=>{
              this.listindex = res.data;
            this.form.numcustomerId=res.data[0].customerId;
            this.password = res.data[0].passwordcode;
            console.log('**********'+this.form.numcustomerId);
            })
          },

        submit(){
          if(this.password == 0 ){
            Toast.fail('不能为空')
            return false;
          }
          this.form.passwordnum=this.password;
          passwordedit(this.form).then(res=>{

            this.uuu ='display:none';
            Toast.success('密码修改成功')
            return 0;
          })
        },

      toBack(){
        this.$router.go(-1);
      },

    },

    }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
</style>
